<!--万能表单模块-->
<template>
  <smart-form ref="form" :model="model" :on-submit="onSubmit" :trigger="trigger">
    <smart-form-layout name="text" label="文本" :rules="[{type: 'string', min: 3, max:5}]" require>
      <smart-text-view name="text" placeholder="this is placeholder" value="13123123"></smart-text-view>
    </smart-form-layout>
    <smart-form-layout require hidden name="hidden" label="隐藏组件">
      <smart-text-view name="hidden" placeholder="this is placeholder" value="1"></smart-text-view>
    </smart-form-layout>
    <smart-form-layout require name="number" label="数字">
      <smart-text-view name="number" type="number" placeholder="this is placeholder"></smart-text-view>
    </smart-form-layout>
    <smart-form-layout require name="textarea" label="文本域">
      <smart-text-view name="textarea" type="textarea" placeholder="this is placeholder"></smart-text-view>
    </smart-form-layout>

<!--    <smart-form-cell>-->
<!--      <div style="margin-left: 100px;margin-top: 16px; border-bottom: 1px solid lightgray">-->
<!--        <span>可以在表单内部嵌入新的内容</span>-->
<!--      </div>-->
<!--    </smart-form-cell>-->

<!--    <smart-form-layout require name="switch" label="开关">-->
<!--      <smart-switch name="switch" placeholder="this is placeholder"></smart-switch>-->
<!--    </smart-form-layout>-->
<!--    <smart-form-layout require name="checkbox" label="勾选">-->
<!--      <smart-checkbox name="checkbox" placeholder="this is placeholder"></smart-checkbox>-->
<!--    </smart-form-layout>-->

<!--    <smart-form-layout require name="select" label="选择">-->
<!--      <smart-select name="select" placeholder="this is placeholder" :options="options" :value="1"></smart-select>-->
<!--    </smart-form-layout>-->
<!--    <smart-form-layout require name="radio-group" label="单选">-->
<!--      <smart-radio-group name="radio-group" placeholder="this is placeholder" :options="options"></smart-radio-group>-->
<!--    </smart-form-layout>-->
    <smart-form-layout require name="checkbox-group" label="复选">
      <smart-checkbox-group name="checkbox-group" placeholder="this is placeholder"
                            :options="options"></smart-checkbox-group>
    </smart-form-layout>

<!--    <smart-form-layout require name="date" label="日期">-->
<!--      <smart-date-picker name="date" placeholder="this is placeholder"></smart-date-picker>-->
<!--    </smart-form-layout>-->
<!--    <smart-form-layout require name="data-range" label="日期范围">-->
<!--      <smart-date-range name="data-range" placeholder="this is placeholder,this is placeholder"-->
<!--                        shortcuts></smart-date-range>-->
<!--    </smart-form-layout>-->

<!--    <smart-form-layout require name="tree" label="树">-->
<!--      <smart-select-tree name="tree" placeholder="this is placeholder" :options="tree1" searchbar></smart-select-tree>-->
<!--    </smart-form-layout>-->
<!--    <smart-form-layout require name="chk-tree" label="复选树">-->
<!--      <smart-check-tree style="width: 260px;" name="chk-tree" placeholder="this is placeholder" :options="tree2"-->
<!--                        :value="[1]" searchbar></smart-check-tree>-->
<!--    </smart-form-layout>-->

<!--    <smart-form-layout require name="image" label="图片上传">-->
<!--      <smart-image-uploader name="image" placeholder="this is placeholder" :limit="3"-->
<!--                            value="e7f68debda904717a4f7cb9c7084fbae.png,f187ebe46515472abe52efcaa8fdb668.png"></smart-image-uploader>-->
<!--    </smart-form-layout>-->
<!--    <smart-form-layout require name="file" label="文件上传">-->
<!--      <smart-file-uploader name="file" placeholder="this is placeholder"></smart-file-uploader>-->
<!--    </smart-form-layout>-->

<!--    <smart-form-layout require name="editor" label="富文本框">-->
<!--      <smart-editor name="editor" placeholder="this is placeholder"></smart-editor>-->
<!--    </smart-form-layout>-->
  </smart-form>
</template>

<script>

let options = [
    {value: 1, label: '区域1'}
    , {value: 2, label: '区域2'}
];


let tree1 = [
    {id: 1, label: '一级 1'}
    , {id: 4, pid: 1, label: '二级 1-1'}
    , {id: 9, pid: 4, label: '三级 1-1-1'}
    , {id: 2, pid: 4, label: '一级 2'}
];

let tree2 = [
    {id: 1, label: '一级 1'}
    , {id: 4, pid: 1, label: '二级 1-1'}
    , {id: 9, pid: 4, label: '三级 1-1-1'}
    , {id: 2, pid: 4, label: '一级 2'}
];

export default {
    components: {},
    data() {
        return {
            options: options,
            tree1: tree1,
            tree2: tree2,
            model: [
                {name: 'text', label: '文本'}
                , {name: 'hidden', label: '隐藏组件'}
                , {name: 'number', label: '数字'}
                , {name: 'textarea', label: '文本域'}
                , {name: 'switch', label: '开关'}
                , {name: 'checkbox', label: '开关'}
                , {name: 'select', label: '选择'}
                , {name: 'radio-group', label: '单选'}
                , {name: 'checkbox-group', label: '复选'}
            ]
        }
    },

    mounted() {
        this.$nextTick(()=>{
            console.log('-------------------------------------------------------------')
            console.log(this.$refs.form.serialize());
            console.log('-------------------------------------------------------------')
        })
    },
    methods: {
        /**
         * 数据联动触发器
         *
         * @param name  字段名
         * @param value 值
         * @param formGroup
         */
        trigger: function (name, value, formGroup) {
            console.log(name + ' - ' + value);
            // let editor = this.$layers.fetch(formGroup, e => e.name === 'editor');
            // console.log('==============================================================')
            // console.log(editor.getValue());
            // console.log('==============================================================')
        },
        onSubmit: function (data) {
            console.log(data);
            return false;
        },
        onReset: function () {
            this.$refs.form.reset();
        }
    }
}
</script>
